
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <script src="js/axios.min.js"></script>
    <link rel="stylesheet" href="ele-2.15.7/theme-chalk/index.css">
    <script src="ele-2.15.7/index.js"></script>
    <script src="js/jquery-1.9.0.js"></script>
    <link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet">
    <title></title>
    <link rel="shortcut icon" type="image/x-icon" href="images/ThreeGayslogo.png"/>
    <link rel="stylesheet" type="text/css" href="css/index-z.css" />
    <!--跑马灯标题-->
    <script type="text/javascript">
        var str="ThreeGays(中国)-官方网站 (欢迎你)"; // title
        // 跑马灯标题
        function run(){
            str=str.substring(1,str.length)+str.substring(0,1);
            document.title=str;  // 在标题栏显示
            window.status=str;  // 在状态栏显示
            //setTimeout(run,300);
        }
        //run();
        window.setInterval("run()",300); //每隔0.3每分钟调用run()方法一次
    </script>
</head>
<body>
<!--主页面-->
<div id="app">
    <!--    固定的menu-->
    <div id="header" class="head-one">
        <a class="logoname" href="index.html">ThreeGays</a>
        <a href="Personal_homepage/Personal.html">
        <i  class="el-icon-user"
            style="margin-right: 20px;"></i>
        </a>
        <a href="shoppingcart.html" title="我的购物车"><i  class="el-icon-shopping-cart-1"></i></a>
        <!--        <div style=""></div>-->
        <i class="el-icon-search" @click="show0 =!show0,show00=false"></i>
        <transition name="el-zoom-in-center">
            <div class="search"
                 @click="show0=true,show00=!show00" v-show="show0">
                <input type="text" class="search-ipt" placeholder="探索新世界"/>
            </div>
        </transition>
    </div>
    <!--    顶部底色-->
    <div class="top"></div>
    <!--    搜索menu-->
    <transition name="el-zoom-in-top">
        <div v-show="show00" class="menudiv0" @click="show00=false,show0=false">
            <ul>
                <li style="font-size: 10px;font-weight: lighter; color: #828282 ">热门搜索</li>
                <li><i  class="el-icon-right"></i><a href="">HUAWEI P60 Art</a></li>
                <li><i  class="el-icon-right"></i><a href="">iPhone14 Pro Max</a></li>
                <li><i  class="el-icon-right"></i><a href="">AirPods Pro</a></li>
                <li><i  class="el-icon-right"></i><a @click="show2 = true,show00=false">phone</a></li>
                <li><i  class="el-icon-right"></i><a href="">配件</a></li>
            </ul>
        </div>
    </transition>
    <!--    商店menu-->
    <el-collapse-transition>
        <div v-show="show1" class="menudiv" @mouseover="show1 = true" @mouseout="show1 = false">
            <ul>
                <li style="font-size: 10px;font-weight: lighter; color: #828282 ">选购</li>
                <li><a href="shop.html">新品上线</a></li>
                <li><a href="https://www.apple.com.cn/">Apple</a></li>
                <li><a href="https://www.sony.com.cn/">Sony</a></li>
                <li><a href="https://www.mi.com/">Xiaomi</a></li>
                <li><a href="https://consumer.huawei.com/cn/phones/">HUAWEI</a></li>
            </ul>
            <ul id="menu-ul2">
                <li style="font-size: 10px;font-weight: lighter; color: #828282 ">服务</li>
                <li style="line-height: 20px"><a href="" style="font-size: 12px; ">售后</a></li>
                <li style="line-height: 20px"><a href="" style="font-size: 12px; ">旧机换购</a></li>
                <li style="line-height: 20px"><a href="" style="font-size: 12px; ">分期付款</a></li>
                <li style="line-height: 20px"><a href="" style="font-size: 12px; ">线下门店分布</a></li>
            </ul>
            <ul id="menu-ul3">
                <li style="font-size: 10px;font-weight: lighter; color: #828282 ">帮助</li>
                <li style="line-height: 20px"><a href="" style="font-size: 12px; ">关于我们</a></li>
                <li style="line-height: 20px"><a href="" style="font-size: 12px; ">加入ThreeGays</a></li>
            </ul>
        </div>
    </el-collapse-transition>
    <!--    手机menu-->
    <el-collapse-transition>
        <div v-show="show2" class="menudiv" @mouseover="show2 = true" @mouseout="show2 = false">
            <ul>
                <li style="font-size: 10px;font-weight: lighter; color: #828282 ">探索iPhone宇宙</li>
                <li onclick="show()"><a href="shop.html#tel" >iPhone 14 Pro</a></li>
                <li><a href="shop.html#tel">iPhone 14</a></li>
                <li><a href="shop.html#tel">iPhone 13</a></li>
                <li><a href="shop.html#tel">iPhone 12</a></li>
                <li><i  class="el-icon-right"></i><a style="font-size: 10px;" href="shop.html#tel">更多机型</a></li>

            </ul>
            <ul id="menu-ul4">
                <li style="font-size: 10px;font-weight: lighter; color: #828282 ">挑选HUAWEI</li>
                <li style="line-height: 20px"><a href="shop.html#tel" style="font-size: 12px; ">Mate 系列</a></li>
                <li style="line-height: 20px"><a href="shop.html#tel" style="font-size: 12px; ">nova 系列</a></li>
                <li style="line-height: 20px"><a href="shop.html#tel" style="font-size: 12px; ">HONOR</a></li>
                <li style="line-height: 20px"><a href="shop.html#tel" style="font-size: 12px; ">P 系列</a></li>
                <li style="line-height: 20px"><i  class="el-icon-right"></i><a href="shop.html#tel" style="font-size: 12px; ">探索更多系列</a></li>
            </ul>
            <ul id="menu-ul5">
                <li style="font-size: 10px;font-weight: lighter; color: #828282 ">选购Xiaomi</li>
                <li style="line-height: 20px"><a href="" style="font-size: 12px; ">Xiaomi 13</a></li>
                <li style="line-height: 20px"><a href="" style="font-size: 12px; ">Redmi 系列</a></li>
                <li style="line-height: 20px"><a href="" style="font-size: 12px; ">全部型号</a></li>
            </ul>
        </div>
    </el-collapse-transition>
    <!--    电脑menu-->
    <el-collapse-transition>
        <div v-show="show3" class="menudiv" @mouseover="show3 = true" @mouseout="show3 = false">
            <ul>
                <li style="font-size: 10px;font-weight: lighter; color: #828282 ">品牌旗舰</li>
                <li><a href="shop.html#computer">Alienware</a></li>
                <li><a href="shop.html#computer">拯救者 系列</a></li>
                <li><a href="shop.html#computer">MacBook 系列</a></li>
                <li><i  class="el-icon-right"></i><a style="font-size: 10px;" href="shop.html#computer">查看更多</a></li>
            </ul>
            <ul id="menu-ul6">
                <li style="font-size: 10px;font-weight: lighter; color: #828282 ">类型</li>
                <li style="line-height: 20px"><a href="shop.html#computer" style="font-size: 12px; ">轻薄本</a></li>
                <li style="line-height: 20px"><a href="shop.html#computer" style="font-size: 12px; ">游戏本</a></li>
                <li style="line-height: 20px"><a href="shop.html#computer" style="font-size: 12px; ">电脑主机</a></li>
            </ul>
        </div>
    </el-collapse-transition>
    <!--    耳机menu-->
    <el-collapse-transition>
        <div v-show="show4" class="menudiv" @mouseover="show4 = true" @mouseout="show4 = false">
            <ul>
                <li style="font-size: 10px;font-weight: lighter; color: #828282 ">畅想音乐的世界</li>
                <li><a href="shop.html#ear">Beats Studio3 Wireless</a></li>
                <li><a href="shop.html#ear">SONY WH-1000XM5</a></li>
                <li><a href="shop.html#ear">AirPods Pro</a></li>
                <li><a href="shop.html#ear">SENNHEISER</a></li>
                <li><i  class="el-icon-right"></i><a style="font-size: 10px;" href="shop.html#ear">更多机型</a></li>
            </ul>
            <ul id="menu-ul7">
                <li style="font-size: 10px;font-weight: lighter; color: #828282 ">喜欢的类型</li>
                <li style="line-height: 20px"><a href="shop.html#ear" style="font-size: 12px; ">头戴式</a></li>
                <li style="line-height: 20px"><a href="shop.html#ear" style="font-size: 12px; ">入耳式</a></li>
                <li style="line-height: 20px"><a href="shop.html#ear" style="font-size: 12px; ">降噪耳机</a></li>
                <li style="line-height: 20px"><a href="shop.html#ear" style="font-size: 12px; ">运动耳机</a></li>
                <li style="line-height: 20px"><a href="shop.html#ear" style="font-size: 12px; ">蓝牙耳机</a></li>
                <li style="line-height: 20px"><i  class="el-icon-right"></i><a href="shop.html#ear" style="font-size: 12px; ">寻找更多</a></li>
            </ul>
        </div>
    </el-collapse-transition>
    <!--    配件menu-->
    <el-collapse-transition>
        <div v-show="show5" class="menudiv" @mouseover="show5 = true" @mouseout="show5 = false">
            <ul>
                <li style="font-size: 10px;font-weight: lighter; color: #828282 ">购买配件</li>
                <li><a href="shop.html#pen">机械键盘</a></li>
                <li><a href="shop.html#pen">显示器</a></li>
                <li><a href="shop.html#pen">智能手表</a></li>
                <li><i  class="el-icon-right"></i><a style="font-size: 10px;" href="shop.html#pen">更多配件</a></li>
            </ul>
            <ul id="menu-ul9">
                <li style="font-size: 10px;font-weight: lighter; color: #828282 ">关于配件</li>
                <li style="line-height: 20px"><a href="shop.html#pen" style="font-size: 12px; ">功能</a></li>
            </ul>
        </div>
    </el-collapse-transition>
    <!--    menu-->
    <div class="head-two">
        <ul style="list-style: none;">
            <li><img class="logo" src="images/ThreeGayslogo.png"></li>
            <li><a href="shop.html" @mouseover.prevent="show1 = true,show2 = false,show3 = false,show4 = false,show5 = false" >商店</a></li>
            <li><a href="shop.html" @mouseover.prevent="show2 = true,show1 = false,show3 = false,show4 = false,show5 = false">手机</a></li>
            <li><a href="shop.html" @mouseover.prevent="show3 = true,show1 = false,show2 = false,show4 = false,show5 = false">电脑</a></li>
            <li><a href="shop.html" @mouseover.prevent="show4 = true,show1 = false,show2 = false,show3 = false,show5 = false">耳机</a></li>
            <li><a href="shop.html " @mouseover.prevent="show5 = true,show1 = false,show2 = false,show4 = false,show3 = false">配件</a></li>
        </ul>
    </div>
    <!--广告页1-->
    <div @mouseover="show00=false" class="gg1">
        <div class="gg1-t"><a>i</a><b>Phone 14</b></div><br>
        <c>巅峰之作</c><br>
        <div class="gg1-a">
            <a href="https://www.apple.com.cn/iphone-14/">去官网了解
                <i  class="el-icon-arrow-right" style="color: #3a8ee6"></i>
            </a>
            <a href="shop.html" style=" margin-left: 25px;">购买
                <i  class="el-icon-arrow-right" style="color: #3a8ee6"></i>
            </a>
        </div>
        <div style="height: 355px; background-image: url(images/iphone14.png); background-size:100% 100%; width: 100%; cursor: pointer"></div>

        <div class="gg1-img"></div>
    </div>
    <!--    <div @mouseover="show00=false" style="height: 610px; background-image: url(images/ys.png); background-size:100% 100%;  width: 100%; cursor: pointer"> </div>-->
    <!--广告页2-->
    <div @mouseover="show00=false,show0=false"class="containter">
        <div style="background-color: black">
            <div class="gg2-t"><i class="el-icon-s-goods" style="color: white"></i><b>Store</b></div>
            <div style="text-align: center; margin-top: 15px">
                <a style="color: #c7c7c7; font-size: 25px; margin-left: 25px">这些产品，</a>
                <a style="color: white; font-size: 25px;margin-left: -10px">很不错。</a></div>
            <div style="margin-top: 25px;">
                <template>
                    <el-carousel indicator-position="none" :interval="4500" :loop="false" type="card" height="500px">
                        <el-carousel-item v-for="items, index in Sgoods" class="gg2-i">
                            <a>{{items.goodsname}}</a><br>
                            <b>{{items.goodsinfo}}</b><br>
                            <c>RMB {{items.price}} 起</c>
                            <image class="gg2-p" :src="path + items.image"></image>
                        </el-carousel-item>
                    </el-carousel>
                </template>
            </div>
        </div>
        <div class="vd1-a">
            <h1>强力出圈</h1>
            <a style="color: white; font-size: 20px;line-height: 60px">iPhone 14 Pro Max 全新概念，欢迎登入灵动岛。</a>
        </div>
        <video muted autoplay loop class="vd1" >
            <source src="images/iphone14vd.mp4" type="video/mp4">
        </video>
    </div>
    <div style="background-color: #161617; height: 1800px;">
        <!--        广告字-->
        <div class="vd1-b">
            <h1>iPhone 14 Pro 和 iPhone 14 Pro Max</h1>
            <a>RMB 333/月起或 RMB 7999 起，</a>
            <b>立即购买</b><i  class="el-icon-arrow-right" style="color: #3a8ee6"></i>
        </div>

<!--        卡片-->
        <div style="margin-top: 120px">
            <div class="card1">
                <a>HUAWEI</a><br>
                <h1>领启时代</h1><br>
                <b>RMB 12999* 起，超轻薄四曲折叠。</b>
                <div class="card1-p"></div>
            </div>
            <!--        卡片2-->
            <div class="card2" @mouseover.prevent="sw = false" @mouseout="sw = true">
                <div style="margin-top: 60px">
                    <el-switch
                            style="display: block;"
                            v-model="sw"
                            active-color="#0087f1"
                            inactive-color="black">
                    </el-switch>
                    <span>Mate 系列</span><br>
                    <span style="line-height: 60px;">现在下单 ，</span>
                </div>
                <span style="line-height: 30px;">立减</span><a style="color: #FFFFFF; font-size: 50px;">10%。</a>
            </div>
            <div class="card3" style="margin-top: 20px;">
                <video muted autoplay loop class="vd2" >
                    <source src="images/airpodspro2.mp4" type="video/mp4">
                </video>
            </div>
            <div class="card4">
                <div class="card4-t">
                    <span><i  class="el-icon-magic-stick"></i> 好的配件，</span><br>
                    <span>助力你一臂之力，事半功倍。</span>
                </div>
                <img src="images/pj.png"><br>
            </div>
            <div class="card5">
                <div class="card5-t">
                    <span>敬 追求完美 的你</span><br>
                    <span style="font-size: 25px; line-height: 45px">极致办公</span><br>
                    <span>它或许能满足你</span><br>
                    <span>舒适体验与专业性能</span><br>
                    <a href="shop.html" style="color: #3a8ee6; line-height: 30px; font-size: 15px"><i  class="el-icon-bottom-right"></i>立即了解</a>
                </div>
                <img src="images/czp.png">
            </div>
            <div class="card6">
                <div class="card6-t">
                    <span style="font-size: 25px;"  @mouseover="hb = !hb">我支持环保 <i  class="el-icon-loading"></i></span>
                </div>
                <transition name="el-fade-in">
                    <img v-show="hb" src="images/hb.png">
                </transition>
            </div>
            <div class="card5">
                <video muted autoplay loop class="vd3" >
                    <source src="images/whxm5.mp4" type="video/mp4">
                </video>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="footinfo1">
            <p>1.网站简介：ThreeGays一个专注于电子设备的高质量平台，只为给您提供更加舒适便捷优质的服务，ThreeGays祝您购物愉快。2.关于网站：此网站由ThreeGays赞助 由Team ThreeGays制作 此网站仅供学习使用 严禁私自转发商用 一经发现后果自负。</p>
            <p>3.关于购物：用户可在商店界面进行购物，商品出现任何问题可以咨询网站客服，由于本商店售卖商品的特殊性，因此任何商品均不支持7天无理由退款。但本商店支持保修服务，产品保修一般为3个月，注意不同产品可能存在保修期限不同，请用户注意</p>
            <p>留意商品界面的详细信息再进行购买。4.加入ThreeGays:ThreeGays仍处于试验阶段，若你想要加入我们请联系我们，我们会在七个礼拜日内与您取得联系，Team ThreeGays欢迎你的加入。5.声明：ThreeGays仅此一个网站，其他均为假冒，谨防上当受骗。</p>
        </div>
        <div class="footinfo">
            <p class="about">
                <a href="">关于我们</a>|
                <a href="">商务合作</a>|
                <a href="">投诉指引</a>|
                <a href="">购物协议</a>|
                <a href="">个人隐私政策</a>|
                <a href="">用户服务协议</a>|
                <a href="">ThreeGays制作人协议</a>|
                <a href="">商家入驻协议</a>|
                <a href="">联系我们</a>|
                <a href="">HELP</a>
            </p>
            <p>
                <a href="http://www.12377.cn">违法和不良信息举报：www.12377.cn</a> 举报电话：12377
                <a href="https://jbts.mct.gov.cn/">12318全国文化市场举报网站</a></p>
            <p>Copyright (C) 2004-2022 ThreeGays.All Rights Reserved</p>
        </div>
    </div>
</div>
<!--js-->
<script type="text/javascript">

    var HiddenDiv = function(){
        document.getElementById("contentTest").style.visibility = "hidden";
    }
    var ShowDiv = function(){
        document.getElementById("contentTest").style.visibility = "visible";
    }

</script>

<!--vue-->
<script>
    var v = new Vue({
        el : "#app",
        data : {
            show00 : false,
            show0: false,
            show1: false,
            show2: false,
            show3: false,
            show4: false,
            show5: false,
            hb: false,
            Sgoods: [],
            sw: true,
            path: location.pathname.substring(0,location.pathname.lastIndexOf("/") + 1),
        },
        created(){
            this.card1()// 执行查询
            console.log(this.path)
        },
        methods: {
            card1(){
                axios.get(".." + this.path + "IndexCardServlet.s",{

                }).then(res => {
                    console.log(res.data.data);
                    this.Sgoods = res.data.data;
                })
            }
        }
    });
</script>

</body>
</html>

<!--基础css-->
<style>
    html,body,#app{
        width: 100%;
        background-color: #161617;
    }
    html{
        height: 100%;
    }
    body{
        overflow: auto;height: 100%;
    }
    .footer {
        height: 130px;
        width: 100%;
        background-color: #161617;
    }
</style>

